import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { reqCate, reqGoods, reqGroupon, reqNew, reqSeck } from '../../request/api'
import './Home.less'
import { FireFill } from 'antd-mobile-icons'
import { countTime } from '../../filters'

import Goods from './components/Goods/Goods'
import Groupon from './components/Groupon/Groupon'
import New from './components/New/New'
import Seckill from './components/Seckill/Seckill'
import { Link } from 'react-router-dom'

export default class Home extends Component {
  constructor() {
    super()
    // 一、初始化数据
    this.state = {
      news: [],//新人专享
      goods: [],//首页商品
      groupon: [],//万人团
      seckill: [],//秒杀
      cates: [],//商品分类
      n: 0,
      timeArr: {h:0,m:0,s:0}//倒计时
    }
  }
  changeN(n) {
    console.log(n)
    this.setState({
      n
    })
  }
  render() {
    let { news, goods, groupon, seckill, cates, n, timeArr } = this.state
    // console.log(timeArr)
    return (
      <div className='home'>
        {/* 1.公共头部 */}
        <Header title="首页"></Header>
        {/* 2.新人专享 */}
        <New news={news} timeArr={timeArr}></New>
        {/* 3.导航栏 */}
        <div className='nav'>
          {cates.length > 0 ? <>
            {cates.map(item => {
              return <Link to="/index/cate" className='item' key={item.id}>
                <span><FireFill /></span>
                <p>{item.catename}</p>
              </Link>
            })}
          </> : null}
        </div>
        {/* 4.秒杀 */}
        <Seckill seckill={seckill} timeArr={timeArr}></Seckill>
        {/* 5.万人团 */}
        <Groupon groupon={groupon} timeArr={timeArr}></Groupon>
        {/* 6.首页商品列表 */}
        <Goods goods={goods} n={n} changeN={(n) => this.changeN(n)}></Goods>
      </div>
    )
  }
  componentDidMount() {
    // 页面倒计时  开启定时器
    let _this = this
    this.timer = setInterval(() => {
      let times = countTime("2022-05-23 00:00:00");
      this.setState({
        timeArr: { ...times }
      })
    }, 1000)
    // 二、请求数据
    reqNew().then(res => {//新人专享
      this.setState({
        news: res.data.list
      })
    })

    reqCate().then(res => {//商品分类
      this.setState({
        cates: res.data.list
      })
    })

    reqGoods().then(res => {//首页商品
      this.setState({
        goods: res.data.list
      })
    })

    reqGroupon().then(res => {//万人团
      this.setState({
        groupon: res.data.list
      })
    })

    reqSeck().then(res => {//秒杀
      this.setState({
        seckill: res.data.list
      })
    })
  }
  componentWillUnmount() {
    // 清除定时器
    clearInterval(this.timer)
  }
}
